// # ImageView
// ##author pengpanting
// 显示图片，包括显示图片标题（在图片的左下角），点击图片跳转到到链接
//
// className: ImageView
//
// ## 配置
//
// 变量 | 类型 | required | 描述
// ----|------|----------|-----
// src | string | false | 显示的图片
// title | string | false | 左下角显示的标题
// href | string | false | 点击图片，跳转的链接
//
// 例子：
//
// ```js
// {
//     type: "ImageView",
//     src: "./images/hello.png",
//     title: "terry",
//     href: "http://www.baidu.com"
// }
// ```
////
define(['./BaseView'], function(BaseView) {



  /*
   * 使用div+background-image方式显示图片，以便保持图片比例
   */
  return BaseView.extend({

    // 对应到css
    type: 'ImageView',
    defaultimage: "",

    initialize: function(options) {
      this.a = document.createElement('a');
      // 图片容器
      // this.div = document.createElement('div');
      this.img = document.createElement('img');
      this.img.classList.add('image');
      this.title = document.createElement('div');
      BaseView.prototype.initialize.apply(this, arguments);
      this.a.style["display"]="block";
      this.img.style["display"]="block";
      if(options.padding){
        this.a.style["padding"]=options.padding;
      }
      // this.div.appendChild(this.img);
    },

    // 使用css显示图片
    // options.src 图片地址
    // options.width 图片实际宽度，用于计算比例
    // options.height 图片实际高度，用于计算比例
    _setImageWithStyle: function(options) {
      var _this = this;
      $(_this.img).attr('src',options.src);
      $(_this.img).css({
        'width': '100%',
        'height': 'auto'
      });
      setTimeout(function(){
        var boxWidth = _this.$el.width();
        var boxHeight = 'auto';
        switch (_this.options.scale) {
          case '169' :
            boxHeight = boxWidth * 9 / 16;
            break;
          case '43' :
            boxHeight = boxWidth * 3 / 4;
            break;
          case '11' :
            boxHeight = boxWidth;
            break;
          default:
            boxHeight = 'auto';
        }
        _this.$el.css({'height': boxHeight + 'px'});
        $(_this.img).css({'height':boxHeight +'px'});
      },0);
    },
      _getStyleFromOptions:function(options){
        // var style = {"marginTop":this.options.marginTop+"px","marginRight": this.options.marginRight+"px","marginLeft":this.options.marginLeft+"px","marginBottom":this.options.marginBottom+"px"
        //
        // }
        // options.style = style;
        // }
        // return style;
    },
    render: function() {
      this.$el.empty();
      this.img.setAttribute('style','border-radius: '+ this.options.borderRadius +'px');
      // 图片连接
      if(this.options.href){
        this.a.href = this.options.href;
      }
      // 图片标题
      if (this.options.title) {
        this.title.innerText = this.options.title;
        this.title.classList.remove('hide');
      } else {
        this.title.classList.add('hide');
      }
      this.el.appendChild(this.a);
      this.a.appendChild(this.img);
      // $(this.el).css(this._getStyleFromOptions(this.options));
      if (this.options.title) {
        // 文本容器
        this.title.classList.add('title');
        this.title.innerText = this.options.title;
        this.a.appendChild(this.title);
      }
      function repairImagUrl(url){
        if(!url){return url;}
        //后端返回的可能是一个逗号隔开的字符串
        var Arr =[""];
        if(typeof(url)=="string")
        {
          Arr= url.split(",")
        }else if(url instanceof Array){
          Arr = url;
        }
        return Arr[0]||"";
      }
      // 使用css显示图片
      var me = this;
      var image = new Image();
      var key;
      if (me.options.key) {
        var curModel = this.getModel();
        key = curModel ? curModel.get(me.options.key) : me.defaultimage;
        if (!key) {
          key = me.defaultimage;
        }
        key = repairImagUrl(key);
        if (key!=undefined && key.indexOf("data:image") != 0
          && key.indexOf("http://") != 0 && key.indexOf("./") != 0) {
          key = key.replace(/^[\.\/]+/g, "/");
          key = ((window.app && window.app.url) ? window.app.url : "") + key;
        }
        //解决图片加载报错 取默认图片
        if (key!=undefined){
          if(key.indexOf("data:image")==0){
            key=me.defaultimage;
          }
        }
        image.src = key;
      } else if (me.options.src) {
        key = image.src = me.options.src;
      } else {
        key = image.src = me.defaultimage;
      }
      image.onload = (function(_me) {
        // _me.img.src = key;
          var imgsrc = key;
          // if not starts with data:image and http:
          if (key.indexOf("data:image") != 0
            && key.indexOf("http://") != 0 && key.indexOf("./") != 0 ) {
            // FIXME 临时修正，替换成根目录则不是一个好的解决办法，有些图片资源确实在本地
            key = key.replace(/^[\.\/]+/g, "/");
            imgsrc = ((window.app && window.app.url) ? window.app.url : "") + key;
          }
          _me._setImageWithStyle({
            // 绝对路径，不处理，相对路径，加上window.app.url
            // scale:_me.options.scale,
            src: imgsrc
          });
      })(me);

      image.onerror = (function(_me) {
        return function() {
          _me.img.src = _me.defaultimage;
          // $(_me.img).css({
          //   // 'background-image': 'url(' + _me.defaultimage + ')',
          //   // 'padding-top': 100 + '%'
          // });
        }
      })(me);
      return this;
    },

    onDataBind: function(model){
      this.render();
    },

  });

});
